<template>
  <div class="list">
    <div class="content">
      <h3>角色列表</h3>
      <el-button type="success" size="medial"  @click="toAdd" round><i class="el-icon-circle-plus-outline"></i>新增</el-button>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;text-align: center"
        :header-cell-style="{background:'#F3F4F7',color:'black',height:'40px'}"
      width="100%">
        <el-table-column
          prop="roleName"
          label="角色名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="roleDes"
          label="职能描述"
          >
        </el-table-column>
        <el-table-column
          label="人员数量"
          >
          <template scope="scope">
            {{scope.row.count}}
            <el-link type="primary" @click="countShow(scope.row.id)">查看</el-link>
          </template>


        </el-table-column>
        <el-table-column
          label="添加时间"
          prop="createTime"
          :formatter="formatDate"
          >
        </el-table-column>
        <el-table-column
          label="启用/停用"
          >
            <template  slot-scope="scope">
              <span v-if="scope.row.useing">
                <el-switch
                  v-model="value"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </span>
              <span v-else>
                <el-switch
                  v-model="value2"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </span>

            </template>
        </el-table-column>
        <el-table-column
          label="操作"
          >
          <template  slot-scope="scope">
            <el-link type="primary" @click="editPermit(scope.row.id)">权限</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
            <el-link type="primary" @click="editInfo(scope.row)">编辑</el-link>
            <!--          <el-link type="primary">删除</el-link>-->
          </template>

        </el-table-column>
      </el-table>
      <div style="float: right;margin-top: 5px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15]"
          :page-size= 'size'
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div style="clear: both"></div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <h2>您希望{{currentRole.roleName}}角色拥有的权限:</h2>
      <div>
        <el-checkbox v-model="checked1" true-label="sh" label="运动健康" border></el-checkbox>
        <el-checkbox v-model="checked2" true-label="ma" label="医疗服务" border></el-checkbox>
        <el-checkbox v-model="checked3" true-label="sm" label="商城系统" border></el-checkbox>
        <el-checkbox v-model="checked4" true-label="cs" label="内容管理" border></el-checkbox>
        <el-checkbox v-model="checked5" true-label="ss" label="系统管理" border></el-checkbox>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="changePermit">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog title="管理员列表" :visible.sync="dialogTableVisible">
      <el-table :data="adminData">
        <el-table-column property="loginName" label="登录名" ></el-table-column>
        <el-table-column property="adminName" label="管理员名" ></el-table-column>
        <el-table-column property="phone" label="电话"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="480px" @close="()=>{ this.form={}}" >
      <h2>您希望新增的角色信息:</h2>
      <el-form :model="form">
        <el-form-item label="角色名称" label-width="120px">
          <el-input v-model="form.name" autocomplete="off" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="120px">
          <el-input type="textarea" v-model="form.des" style="width: 200px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogForm2Visible" width="480px" @close="()=>{ this.form={};this.edit={}}">
      <h2>您希望编辑的角色信息:</h2>
      <el-form :model="form">
        <el-form-item label="角色名称" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"  :placeholder="edit.name" style="width: 200px" ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="120px">
          <el-input type="textarea" v-model="form.des"  :placeholder="edit.des" style="width: 200px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
var all = []
export default {
  inject:['reload'],
  name: "accountList",
  created(){
    this.axios.get("micro-sys-server/role/all").then( res => {

      let datas = res.data.data
      all = res.data.data
      this.total = datas.length
      if(this.total>5){
        for (let i=0;i<5;i++){
          this.tableData.push(datas[i])
        }
      }else {
        for (let i=0;i<datas.length;i++){
          this.tableData.push(datas[i])
        }
      }
      this.loading = false
    });
  },
  data(){
    return {
      value:true,
      value2:false,
      centerDialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogForm2Visible:false,
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
      tableData: [],
      adminData: [],
      multipleSelection: [],
      currentPage4: 1,
      total:0,
      size:5,
      currentRole:{},
      form:{
        id:0,
        name:'',
        des:''
      },
      edit:{
        name:'',
        des:''
      },
      loading: true
    }
  },
  methods:{
    //时间格式化
    formatDate:function(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data == null) {
        return ''
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSizeChange(val) {
      this.tableData=[]
      this.currentPage4 = 1
      if(all.length < val){
        for (let i=0;i<all.length;i++){
          this.tableData[i] = all[i]
        }
      }else {
        for (let i=0;i<val;i++){
          this.tableData[i] = all[i]
        }
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tableData=[]
      let j = this.size
      let start = j * (val - 1 )
      if(all.length > val*this.size){
        for (let i=0;i<j;i++){
          this.tableData[i] = all[i+start]
        }
      }else {
        for (let i=0;i<all.length-start;i++){
          this.tableData[i] = all[i+start]
        }
      }

    },
    editPermit(id){
      this.axios.get("micro-sys-server/role/findById",{
        params:{
          id: id
        }
      }).then( res => {
        console.log(res)
        this.currentRole = res.data.data
        let role = this.currentRole
        let permit = role.permit
        this.name = role.roleName
        this.checked1 = false
        this.checked2 = false
        this.checked3 = false
        this.checked4 = false
        this.checked5 = false
        this.centerDialogVisible = true;
        // alert(permit)
        if(permit.indexOf("sh") >= 0 ) {
          this.checked1 = true
        }
        if(permit.indexOf("ma") >= 0 ) {
          this.checked2 = true
        }
        if(permit.indexOf("sm") >= 0 ) {
          this.checked3 = true
        }
        if(permit.indexOf("cs") >= 0 ) {
          this.checked4 = true
        }
        if(permit.indexOf("ss") >= 0 ) {
          this.checked5 = true
        }
      });

    },
    changePermit(){
      let permit = ''
      if(this.checked1){
        permit += '/sh'
      }
      if(this.checked2){
        permit += '/ma'
      }
      if(this.checked3){
        permit += '/sm'
      }
      if(this.checked4){
        permit += '/cs'
      }
      if(this.checked5){
        permit += '/ss'
      }
      this.centerDialogVisible = false;
      console.log(permit)
      this.axios.put("micro-sys-server/role/changePermit",{
          id: this.currentRole.id,
          permit: permit
      }).then( res => {
        console.log(res)
      });
    },
    countShow(id){
      // alert(id)
      this.adminData = []
      this.axios.get("micro-sys-server/role/findByRoleId",{
        params:{
          id: id
        }
      }).then( res => {
        console.log(res)
        let datas = res.data.data
        this.dialogTableVisible = true
        for (let i=0;i<datas.length;i++){
          this.adminData.push(datas[i])
        }
      });
    },
    toAdd(){
      this.dialogFormVisible = true
    },
    cancelAdd(){
      this.dialogFormVisible = false
      this.form = {}
    },
    confirmAdd(){
      let data = {
        roleName: this.form.name,
        roleDes: this.form.des
      };
      //向后端发送Axios请求
      this.axios.post("micro-sys-server/role/add",data,).then(res => {
        console.log(res)
        this.dialogFormVisible = false
        this.form = {}
        this.reload()
      });
    },
    editInfo(role){
      this.edit.name = role.roleName
      this.edit.des = role.roleDes
      this.form.id = role.id
      this.dialogForm2Visible = true
    },
    cancelEdit(){
      this.dialogForm2Visible = false
      this.form = {}
    },
    confirmEdit(){
      let data = {
        id: this.form.id,
        roleName: this.form.name,
        roleDes: this.form.des
      };
      this.axios.put("micro-sys-server/role/update",data).then( res => {
        console.log(res)
        this.reload()
      });
    }
  }
}

</script>

<style scoped>
.list{
  /*height: 400px;*/
  border: 1px solid white;
  width: 96%;
  margin: auto;
  padding-left: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  background-color: white;
}
</style>
